<!-- 应用信息修改页 -->
<template>
	<div id="app-edit-view">
		<div class="edit-container">
			<div class="edit-header">
				<a-button type="text" @click="goBack" class="back-btn">
					<template #icon>
						<ArrowLeftOutlined />
					</template>
					{{ backButtonText }}
				</a-button>
				<img class="header-logo" src="/favicon.ico" alt="logo" />
				<h1>编辑应用信息</h1>
			</div>

			<a-card class="edit-card">
				<a-form
					ref="formRef"
					:model="appForm"
					:label-col="{ span: 4 }"
					:wrapper-col="{ span: 16 }"
					@finish="handleSubmit"
				>
					<a-form-item
						label="应用名称"
						name="appName"
						:rules="[
							{ required: true, message: '请输入应用名称!' },
							{ min: 1, max: 30, message: '应用名称长度在1-30个字符之间!' },
						]"
					>
						<a-input v-model:value="appForm.appName" placeholder="请输入应用名称" :maxlength="30" show-count />
					</a-form-item>

					<!-- 管理员和应用创建者可以编辑更多字段 -->
					<template v-if="canEditCover">
						<a-form-item label="应用封面" name="cover">
							<div class="cover-upload-section">
								<!-- 封面预览区域 -->
								<div class="cover-preview-area">
									<div class="cover-container" @click="triggerUpload">
										<!-- 显示封面图片或默认图片 -->
										<img :src="appForm.cover || logoImg" alt="应用封面" class="cover-image" />
										<!-- 悬停时显示的上传遮罩 -->
										<div class="upload-overlay">
											<div class="upload-content">
												<UploadOutlined class="upload-icon" />
												<div class="upload-text">
													{{ appForm.cover ? '更换封面' : '上传封面' }}
												</div>
											</div>
										</div>
									</div>

									<!-- 点击提示 -->
									<div class="upload-hint">点击封面可快速上传</div>

									<!-- 上传方式选择（使用div包装，不绑定表单字段） -->
									<div class="upload-method-selector">
										<a-radio-group v-model:value="uploadMethod" button-style="solid" size="small">
											<a-radio-button value="file">文件上传</a-radio-button>
											<a-radio-button value="url">URL上传</a-radio-button>
										</a-radio-group>
									</div>
								</div>

								<!-- 简化的提示信息 -->
								<div class="upload-tip">
									<p v-if="uploadMethod === 'file'">支持 JPG、PNG 格式，建议尺寸 400x300 像素</p>
									<p v-if="uploadMethod === 'url'">输入图片链接地址，支持 JPG、PNG 格式</p>
								</div>
							</div>

							<!-- 隐藏的文件上传组件（仅用于功能实现，放在表单项外避免冲突） -->
							<div class="hidden-upload-components" style="display: none">
								<FilePictureUpload
									v-if="uploadMethod === 'file'"
									:picture-url="appForm.cover"
									:on-success="handleCoverChange"
								/>
							</div>
						</a-form-item>
					</template>

					<!-- 只有管理员可以设置优先级 -->
					<template v-if="isAdmin">
						<a-form-item label="优先级" name="priority" help="数值越高，在精选应用中的排序越靠前（99为精选应用）">
							<a-input-number
								v-model:value="appForm.priority"
								:min="0"
								:max="99"
								placeholder="请输入优先级"
								class="priority-input"
							/>
							<div class="priority-buttons">
								<a-button size="small" @click="setPriority(0)" :type="appForm.priority === 0 ? 'primary' : 'default'">
									普通应用
								</a-button>
								<a-button size="small" @click="setPriority(99)" :type="appForm.priority === 99 ? 'primary' : 'default'">
									精选应用
								</a-button>
							</div>
						</a-form-item>
					</template>

					<!-- 只读信息显示 -->
					<a-form-item label="初始提示词">
						<div class="init-prompt-display">
							<a-textarea
								:value="appInfo?.initPrompt || ''"
								:auto-size="{ minRows: 3, maxRows: 6 }"
								:maxlength="1000"
								:show-count="true"
								readonly
								placeholder="暂无初始提示词"
								class="readonly-textarea"
							/>
							<div class="readonly-note">初始提示词不可修改</div>
						</div>
					</a-form-item>

					<a-form-item label="生成类型">
						<div class="code-gen-type-display">
							<a-input :value="appInfo?.codeGenType || ''" readonly placeholder="暂无生成类型" class="readonly-input" />
							<div class="readonly-note">生成类型不可修改</div>
						</div>
					</a-form-item>

					<a-form-item label="创建者">
						<div class="user-info">
							<a-avatar :src="appInfo?.user?.userAvatar" :size="24" class="app-edit-avatar">
								{{ appInfo?.user?.userName?.[0]?.toUpperCase() }}
							</a-avatar>
							<span>{{ appInfo?.user?.userName || '未知用户' }}</span>
						</div>
					</a-form-item>

					<a-form-item label="创建时间">
						<span>{{ formatTime(appInfo?.createTime) }}</span>
					</a-form-item>

					<a-form-item label="更新时间" v-if="appInfo?.updateTime">
						<span>{{ formatTime(appInfo?.updateTime) }}</span>
					</a-form-item>

					<a-form-item label="部署状态">
						<div class="deploy-status">
							<a-tag v-if="deployStatus === DEPLOY_STATUS.DEPLOYED" color="green">
								<template #icon>
									<CheckCircleOutlined />
								</template>
								{{ DEPLOY_STATUS_TEXT[DEPLOY_STATUS.DEPLOYED] }}
							</a-tag>
							<a-tag v-else-if="deployStatus === DEPLOY_STATUS.DEPLOYING" color="processing">
								<template #icon>
									<ClockCircleOutlined />
								</template>
								{{ DEPLOY_STATUS_TEXT[DEPLOY_STATUS.DEPLOYING] }}
							</a-tag>
							<a-tag v-else color="default">
								<template #icon>
									<ClockCircleOutlined />
								</template>
								{{ DEPLOY_STATUS_TEXT[DEPLOY_STATUS.NOT_DEPLOYED] }}
							</a-tag>
							<span v-if="appInfo?.deployedTime" class="deploy-time">
								{{ formatTime(appInfo.deployedTime) }}
							</span>

							<!-- 下线按钮 - 只有在已部署时才显示 -->
							<a-button
								v-if="deployStatus === DEPLOY_STATUS.DEPLOYED"
								type="text"
								danger
								size="small"
								@click="handleUndeployApp"
								:loading="undeploying"
								class="undeploy-btn"
							>
								<template #icon>
									<StopOutlined />
								</template>
								下线应用
							</a-button>
						</div>
					</a-form-item>

					<!-- 部署密钥独立显示 -->
					<a-form-item label="部署密钥" v-if="appInfo?.deployKey">
						<div class="deploy-key-section">
							<div class="deploy-key-display">
								<a-input :value="appInfo.deployKey" readonly class="key-input" :style="{ width: '300px' }" />
								<a-button size="small" @click="copyDeployKey" type="text" :style="{ padding: '0 8px' }">
									<template #icon>
										<CopyOutlined />
									</template>
								</a-button>
							</div>
							<div class="readonly-note">部署密钥不可修改</div>
						</div>
					</a-form-item>

					<a-form-item :wrapper-col="{ offset: 4, span: 16 }">
						<a-space>
							<a-button type="primary" html-type="submit" :loading="saving"> 保存修改 </a-button>
							<a-button @click="resetForm"> 重置 </a-button>
							<a-button @click="goToApp" v-if="appInfo?.id">
								<template #icon>
									<EyeOutlined />
								</template>
								进入对话
							</a-button>
						</a-space>
					</a-form-item>
				</a-form>
			</a-card>

			<!-- 应用信息展示 -->
			<a-card class="app-info-display" title="应用信息">
				<a-row :gutter="[16, 16]">
					<a-col :xs="24" :sm="12" :md="12">
						<div class="info-item">
							<div class="info-label">应用ID</div>
							<div class="info-value">{{ appInfo?.id || '-' }}</div>
						</div>
					</a-col>
					<a-col :xs="24" :sm="12" :md="12">
						<div class="info-item">
							<div class="info-label">创建者</div>
							<div class="info-value creator-info">
								<a-avatar :src="appInfo?.user?.userAvatar" :size="20" v-if="appInfo?.user" class="app-edit-avatar">
									{{ appInfo.user.userName?.[0]?.toUpperCase() }}
								</a-avatar>
								<span>{{ appInfo?.user?.userName || '未知用户' }}</span>
							</div>
						</div>
					</a-col>
					<a-col :xs="24" :sm="12" :md="12">
						<div class="info-item">
							<div class="info-label">创建时间</div>
							<div class="info-value">{{ formatTime(appInfo?.createTime) || '-' }}</div>
						</div>
					</a-col>
					<a-col :xs="24" :sm="12" :md="12">
						<div class="info-item">
							<div class="info-label">更新时间</div>
							<div class="info-value">{{ formatTime(appInfo?.updateTime) || '-' }}</div>
						</div>
					</a-col>
					<a-col :xs="24" :sm="12" :md="12">
						<div class="info-item">
							<div class="info-label">部署时间</div>
							<div class="info-value">{{ formatTime(appInfo?.deployedTime) || '-' }}</div>
						</div>
					</a-col>
					<a-col :xs="24" :sm="12" :md="12">
						<div class="info-item">
							<div class="info-label">访问链接</div>
							<div class="info-value">
								<a-button
									v-if="deployStatus === DEPLOY_STATUS.DEPLOYED"
									type="link"
									@click="openDeployUrl"
									class="deploy-link-btn"
								>
									查看预览
								</a-button>
								<span v-else class="not-deployed">{{
									DEPLOY_STATUS_TEXT[deployStatus as keyof typeof DEPLOY_STATUS_TEXT]
								}}</span>
							</div>
						</div>
					</a-col>
				</a-row>
			</a-card>

			<!-- 危险操作区域 -->
			<a-card class="danger-zone" title="危险操作" v-if="canDelete">
				<div class="danger-content">
					<div class="danger-info">
						<ExclamationCircleOutlined class="danger-icon" />
						<div>
							<h4>删除应用</h4>
							<p>删除操作不可恢复，请谨慎操作。删除应用将同时删除所有相关的生成文件和部署内容。</p>
						</div>
					</div>
					<a-button danger @click="confirmDelete" :loading="deleting"> 删除应用 </a-button>
				</div>
			</a-card>
		</div>

		<!-- URL 上传对话框 -->
		<a-modal v-model:open="urlUploadVisible" title="上传图片链接" :footer="null" @cancel="cancelUrlUpload">
			<UrlPictureUpload :picture-url="appForm.cover" :onSuccess="handleUrlUploadSuccess" />
		</a-modal>
	</div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { message } from 'ant-design-vue'
import { Modal } from 'ant-design-vue'
import { useLoginUserStore } from '@/stores/useLoginUserStore'
import {
	getAppVoById,
	updateApp,
	updateAppByAdmin,
	deleteApp as deleteAppApi,
	deleteAppByAdmin,
} from '@/api/appController'
import { undeployApplication } from '@/services/appExperienceService'
import FilePictureUpload from '@/components/picture/FilePictureUpload.vue'
import UrlPictureUpload from '@/components/picture/UrlPictureUpload.vue'
import {
	ArrowLeftOutlined,
	CheckCircleOutlined,
	ClockCircleOutlined,
	CopyOutlined,
	EyeOutlined,
	ExclamationCircleOutlined,
	StopOutlined,
	UploadOutlined,
} from '@ant-design/icons-vue'
import dayjs from 'dayjs'
import ACCESS_ENUM from '@/access/accessEnum'
import { DEPLOY_STATUS, DEPLOY_STATUS_TEXT } from '@/constants/appStatus'
import { useAppStatus } from '@/composables/useAppStatus'
import logoImg from '@/assets/logo.png'
import { getStaticPreviewUrl } from '@/config/env'

const route = useRoute()
const router = useRouter()
const loginUserStore = useLoginUserStore()
const formRef = ref()

// 应用信息
const appInfo = ref<API.AppVO | null>(null)
const appId = computed(() => route.params.id as string)

// 使用统一的状态管理
const { deployInfo, updateFromAppVO, updateDeployStatus } = useAppStatus(appId.value)

// 判断是否为管理员
const isAdmin = computed(() => loginUserStore.loginUser?.userRole === ACCESS_ENUM.ADMIN)

// 判断是否可以删除（管理员或应用创建者）
const canDelete = computed(() => isAdmin.value || appInfo.value?.userId === loginUserStore.loginUser?.id)

// 判断是否可以编辑封面（管理员或应用创建者）
const canEditCover = computed(() => isAdmin.value || appInfo.value?.userId === loginUserStore.loginUser?.id)

// 计算返回按钮文本
const backButtonText = computed(() => {
	// 如果是在新窗口中打开的
	if (window.opener && !window.opener.closed) {
		return '关闭'
	}
	// 如果有历史记录
	if (history.length > 1) {
		return '返回'
	}
	// 否则返回首页
	return '返回首页'
})

// 计算部署状态（兼容模板中的使用）
const deployStatus = computed(() => deployInfo.value?.status || DEPLOY_STATUS.NOT_DEPLOYED)

// 表单数据
const appForm = reactive({
	appName: '',
	cover: '',
	priority: 0,
})

// 操作状态
const saving = ref(false)
const deleting = ref(false)
const undeploying = ref(false)

// 上传方式选择
const uploadMethod = ref<'file' | 'url'>('file')

// URL 上传对话框状态
const urlUploadVisible = ref(false)

// 加载应用信息
const loadAppInfo = async () => {
	try {
		const res = await getAppVoById({ id: appId.value as any })
		if (res.data.code === 0 && res.data.data) {
			appInfo.value = res.data.data

			// 更新状态管理
			updateFromAppVO(appInfo.value)

			// 检查权限：只有应用创建者和管理员可以编辑
			const currentUserId = loginUserStore.loginUser?.id
			const isOwner = appInfo.value.userId === currentUserId

			if (!isOwner && !isAdmin.value) {
				message.error('您没有权限编辑此应用')
				router.push('/')
				return
			}

			// 填充表单
			appForm.appName = appInfo.value.appName || ''
			appForm.cover = appInfo.value.cover || ''
			appForm.priority = appInfo.value.priority || 0
		} else {
			message.error('获取应用信息失败')
			router.push('/')
		}
	} catch (error) {
		console.error('加载应用信息失败:', error)
		message.error('获取应用信息失败，请稍后重试')
		router.push('/')
	}
}

// 处理封面变化
const handleCoverChange = (url: string) => {
	appForm.cover = url
}

// 触发上传操作
const triggerUpload = () => {
	if (uploadMethod.value === 'file') {
		// 文件上传：触发隐藏的文件选择按钮
		setTimeout(() => {
			// 先尝试点击新的文件选择按钮
			const fileButton = document.querySelector('.hidden-upload-components #picture-upload .ant-btn') as HTMLElement
			if (fileButton) {
				fileButton.click()
			} else {
				// 如果按钮不存在，直接触发文件输入框
				const fileInput = document.querySelector(
					'.hidden-upload-components #picture-upload input[type="file"]'
				) as HTMLInputElement
				if (fileInput) {
					fileInput.click()
				}
			}
		}, 100)
	} else {
		// URL 上传：弹出输入对话框
		showUrlUploadDialog()
	}
}

// 显示 URL 上传对话框
const showUrlUploadDialog = () => {
	urlUploadVisible.value = true
}

// 处理 URL 上传成功
const handleUrlUploadSuccess = (pictureUrl: string) => {
	handleCoverChange(pictureUrl)
	urlUploadVisible.value = false
	message.success('封面更新成功！')
}

// 取消 URL 上传
const cancelUrlUpload = () => {
	urlUploadVisible.value = false
}

// 设置优先级
const setPriority = (priority: number) => {
	appForm.priority = priority
}

// 提交表单
const handleSubmit = async () => {
	if (!appInfo.value?.id) return

	saving.value = true
	try {
		let res
		if (isAdmin.value) {
			// 管理员可以修改所有字段（包括优先级）
			res = await updateAppByAdmin({
				id: appInfo.value.id,
				appName: appForm.appName,
				cover: appForm.cover,
				priority: appForm.priority,
			})
		} else if (canEditCover.value) {
			// 应用创建者可以修改名称和封面，但不能修改优先级
			res = await updateAppByAdmin({
				id: appInfo.value.id,
				appName: appForm.appName,
				cover: appForm.cover,
				// 不传递 priority 参数，保持原有优先级
			})
		} else {
			// 其他用户只能修改应用名称
			res = await updateApp({
				id: appInfo.value.id,
				appName: appForm.appName,
			})
		}

		if (res.data.code === 0) {
			message.success('保存成功')
			// 重新加载应用信息
			await loadAppInfo()
		} else {
			message.error('保存失败：' + (res.data.message || '未知错误'))
		}
	} catch (error) {
		console.error('保存失败:', error)
		message.error('保存失败，请稍后重试')
	} finally {
		saving.value = false
	}
}

// 重置表单
const resetForm = () => {
	if (appInfo.value) {
		appForm.appName = appInfo.value.appName || ''
		appForm.cover = appInfo.value.cover || ''
		appForm.priority = appInfo.value.priority || 0
	}
}

// 确认删除
const confirmDelete = () => {
	Modal.confirm({
		title: '确认删除应用',
		content: '删除操作不可恢复，确定要删除这个应用吗？',
		okText: '确认删除',
		cancelText: '取消',
		okType: 'danger',
		onOk: handleDelete,
	})
}

// 下线应用
const handleUndeployApp = () => {
	if (!appInfo.value?.id) return

	Modal.confirm({
		title: '确认下线应用',
		content: '下线后用户将无法访问此应用，但可以重新部署。确定要下线吗？',
		okText: '确认下线',
		cancelText: '取消',
		okType: 'danger',
		onOk: async () => {
			undeploying.value = true
			try {
				const res = await undeployApplication(appInfo.value!.id!)
				if (res.data.code === 0) {
					message.success('应用已下线')
					// 更新状态为未部署
					updateDeployStatus(DEPLOY_STATUS.NOT_DEPLOYED)
					// 同步更新appInfo
					if (appInfo.value) {
						appInfo.value.deployStatus = DEPLOY_STATUS.NOT_DEPLOYED
						appInfo.value.deployKey = undefined
						appInfo.value.deployedTime = undefined
					}
				} else {
					message.error('下线失败：' + (res.data.message || '未知错误'))
				}
			} catch (error) {
				console.error('下线应用失败:', error)
				message.error('下线失败，请稍后重试')
			} finally {
				undeploying.value = false
			}
		},
	})
}

// 删除应用
const handleDelete = async () => {
	if (!appInfo.value?.id) return

	deleting.value = true
	const hideLoading = message.loading('正在删除应用...', 0)
	try {
		let res
		if (canDelete.value) {
			// 使用管理员接口删除（管理员或应用创建者都可以使用）
			res = await deleteAppByAdmin({ id: appInfo.value.id })
		} else {
			// 理论上不应该到这里，因为已经有权限控制
			res = await deleteAppApi({ id: appInfo.value.id })
		}

		if (res.data.code === 0) {
			hideLoading()
			message.success('删除成功')
			router.push('/')
		} else {
			hideLoading()
			message.error('删除失败：' + (res.data.message || '未知错误'))
		}
	} catch (error) {
		hideLoading()
		console.error('删除应用失败:', error)
		message.error('删除失败，请稍后重试')
	} finally {
		deleting.value = false
	}
}

// 进入对话
const goToApp = () => {
	if (appInfo.value?.id) {
		router.push(`/app/${appInfo.value.id}`)
	}
}

// 返回
const goBack = () => {
	// 如果是在新窗口中打开的（通过 window.open），检查 opener 是否存在
	if (window.opener && !window.opener.closed) {
		// 关闭当前窗口
		window.close()
	} else if (history.length > 1) {
		// 如果有浏览器历史记录，使用浏览器返回
		router.go(-1)
	} else {
		// 否则跳转到首页
		router.push('/')
	}
}

// 复制部署密钥
const copyDeployKey = async () => {
	if (!appInfo.value?.deployKey) return

	try {
		await navigator.clipboard.writeText(appInfo.value.deployKey)
		message.success('部署密钥已复制到剪贴板')
	} catch (error) {
		console.error('复制失败:', error)
		message.error('复制失败，请手动复制')
	}
}

// 打开部署访问链接
const openDeployUrl = () => {
	if (appInfo.value?.deployKey && appInfo.value?.userId) {
		// 构建部署访问链接：使用正确的部署URL
		const deployUrl = getStaticPreviewUrl(appInfo.value.codeGenType, appInfo.value.id.toString(), appInfo.value.userId)
		window.open(deployUrl, '_blank')
	}
}

// 格式化时间
const formatTime = (time: string | undefined) => {
	if (!time) return ''
	return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
}

// 组件挂载时加载应用信息
onMounted(() => {
	loadAppInfo()
})
</script>

<style scoped lang="scss">
#app-edit-view {
	max-width: 1000px;
	margin: 0 auto;
	padding: 24px;
	background: #f8fafc;
	min-height: 100vh;

	.edit-container {
		.edit-header {
			display: flex;
			align-items: center;
			gap: 16px;
			margin-bottom: 24px;

			.back-btn {
				color: #666;

				&:hover {
					color: #1890ff;
				}
			}

			.header-logo {
				height: 48px;
				width: auto;
				object-fit: contain;
			}

			h1 {
				margin: 0;
				font-size: 24px;
				font-weight: 600;
				color: #2d3748;
			}
		}

		.edit-card {
			margin-bottom: 24px;
			border-radius: 12px;
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

			:deep(.ant-card-body) {
				padding: 32px;
			}

			.cover-upload-section {
				.cover-preview-area {
					max-width: 320px;

					.cover-container {
						position: relative;
						width: 240px;
						height: 180px;
						border-radius: 12px;
						overflow: hidden;
						border: 2px solid #e8e8e8;
						margin-bottom: 16px;
						cursor: pointer;
						transition: all 0.3s ease;
						user-select: none;

						&:hover {
							border-color: #1890ff;
							transform: translateY(-2px);
							box-shadow: 0 4px 12px rgba(24, 144, 255, 0.15);

							.upload-overlay {
								opacity: 1;
							}
						}

						&:active {
							transform: translateY(0);
						}

						.cover-image {
							width: 100%;
							height: 100%;
							object-fit: cover;
							display: block;
						}

						.upload-overlay {
							position: absolute;
							top: 0;
							left: 0;
							right: 0;
							bottom: 0;
							background: rgba(0, 0, 0, 0.6);
							display: flex;
							align-items: center;
							justify-content: center;
							opacity: 0;
							transition: opacity 0.3s ease;

							.upload-content {
								text-align: center;
								color: white;

								.upload-icon {
									font-size: 24px;
									margin-bottom: 8px;
									display: block;
								}

								.upload-text {
									font-size: 14px;
									font-weight: 500;
								}
							}
						}
					}

					.upload-hint {
						text-align: center;
						font-size: 12px;
						color: #999;
						margin-bottom: 16px;
					}

					.upload-method-selector {
						display: flex;
						justify-content: center;
					}

					.upload-method-selector {
						display: flex;
						justify-content: center;
					}
				}

				.upload-tip {
					margin-top: 16px;
					padding: 12px;
					background: #f8f9fa;
					border-radius: 8px;
					border: 1px solid #e8e8e8;

					p {
						margin: 0;
						font-size: 12px;
						color: #666;
						text-align: center;
					}
				}
			}

			.priority-input {
				width: 120px;
				margin-right: 12px;
			}

			.priority-buttons {
				display: inline-flex;
				gap: 8px;
			}

			.user-info {
				display: flex;
				align-items: center;
				gap: 8px;

				span {
					color: #666;
				}
			}

			.init-prompt-display {
				.readonly-textarea {
					background-color: #f5f5f5;
					border-color: #d9d9d9;

					:deep(.ant-input) {
						background-color: #f5f5f5;
						cursor: default;
					}
				}
			}

			.code-gen-type-display {
				.readonly-input {
					background-color: #f5f5f5;
					border-color: #d9d9d9;
					cursor: default;
				}
			}

			.readonly-note {
				margin-top: 4px;
				font-size: 12px;
				color: #999;
			}

			.deploy-status {
				display: flex;
				align-items: center;
				gap: 12px;

				.deploy-time {
					font-size: 12px;
					color: #999;
				}

				.undeploy-btn {
					margin-left: 8px;
					opacity: 0.8;
					transition: opacity 0.3s ease;

					&:hover {
						opacity: 1;
					}
				}
			}

			.deploy-key-section {
				.deploy-key-display {
					display: flex;
					align-items: center;
					gap: 8px;

					.key-input {
						background-color: #f5f5f5;
						border-color: #d9d9d9;
						cursor: default;
						font-family: 'Courier New', monospace;
						font-size: 13px;
					}
				}
			}
		}

		.app-info-display {
			margin-bottom: 24px;
			border-radius: 12px;
			box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);

			.info-item {
				padding: 12px 16px;
				background: #f8f9fa;
				border-radius: 8px;
				border: 1px solid #e8e8e8;

				.info-label {
					font-size: 12px;
					color: #666;
					margin-bottom: 4px;
					font-weight: 500;
				}

				.info-value {
					font-size: 14px;
					color: #2d3748;
					word-break: break-all;

					&.creator-info {
						display: flex;
						align-items: center;
						gap: 8px;

						span {
							color: #2d3748;
						}
					}
				}

				.deploy-link-btn {
					padding: 0;
					height: auto;
					font-size: 14px;
					color: #1890ff;

					&:hover {
						color: #40a9ff;
					}
				}

				.not-deployed {
					color: #999;
				}
			}
		}

		.danger-zone {
			border-radius: 12px;
			border-color: #ff4d4f;
			box-shadow: 0 4px 20px rgba(255, 77, 79, 0.1);

			:deep(.ant-card-head) {
				background: #fff2f0;
				border-bottom-color: #ffccc7;

				.ant-card-head-title {
					color: #cf1322;
					font-weight: 600;
				}
			}

			.danger-content {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.danger-info {
					display: flex;
					gap: 12px;

					.danger-icon {
						color: #ff4d4f;
						font-size: 20px;
						margin-top: 2px;
					}

					h4 {
						margin: 0 0 4px 0;
						color: #cf1322;
						font-size: 16px;
						font-weight: 600;
					}

					p {
						margin: 0;
						color: #666;
						line-height: 1.6;
						max-width: 500px;
					}
				}
			}
		}
	}
}

@media (max-width: 768px) {
	#app-edit-view {
		padding: 20px;

		.edit-container {
			.edit-header {
				margin-bottom: 20px;
				gap: 12px;

				.header-logo {
					height: 36px; // 移动端logo稍小一些
				}

				h1 {
					font-size: 20px;
				}
			}

			.edit-card {
				:deep(.ant-card-body) {
					padding: 24px;
				}

				:deep(.ant-form-item-label) {
					text-align: left;
				}

				:deep(.ant-row) {
					flex-direction: column;

					.ant-col {
						max-width: 100%;
					}
				}

				.cover-upload-section {
					flex-direction: column;
					gap: 16px;

					.cover-preview-area {
						max-width: 100%;

						.cover-container {
							width: 100%;
							max-width: 320px;
							height: 240px;
							margin: 0 auto;
						}

						.upload-method-selector {
							margin-top: 12px;
						}
					}
				}

				.priority-buttons {
					margin-top: 8px;
				}

				.deploy-key-section {
					.deploy-key-display .key-input {
						width: 100% !important;
					}
				}
			}

			.app-info-display {
				.info-item {
					padding: 10px 12px;

					.info-label {
						font-size: 11px;
					}

					.info-value {
						font-size: 13px;
					}
				}
			}

			.danger-zone {
				.danger-content {
					flex-direction: column;
					gap: 16px;
					align-items: flex-start;

					.danger-info p {
						max-width: 100%;
					}
				}
			}
		}
	}
}

// URL 上传对话框样式
.url-upload-tip {
	margin-top: 12px;

	p {
		margin: 0;
		font-size: 12px;
		color: #666;
		text-align: center;
		background: #f8f9fa;
		padding: 8px 12px;
		border-radius: 6px;
		border: 1px solid #e8e8e8;
	}
}

.app-edit-avatar {
	border: 2px solid #ff8c00 !important;
	box-shadow: 0 2px 8px rgba(82, 196, 26, 0.3) !important;
	transition: all 0.3s ease !important;
	
	&:hover {
		box-shadow: 0 4px 12px rgba(82, 196, 26, 0.5) !important;
		transform: translateY(-1px) !important;
	}
}
</style>
